// 引入Count的UI组件
import CountUI from '../../components/Count'

// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入actionCreator，专门用于创建action对象
import {
  createIncrementAction, 
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

// 1. mapStateToProps函数的返回值是一个对象(作为状态传递给了UI组件)
// 2. 返回对象中key就作为传递给UI组件的props的key，value就作为传递给UI组件props的value——状态
// 3. mapStateToProps用于传递状态
function mapStateToProps(state) {
  return {
    count: state
  }
}

// 1,2,3. mapDispatchToProps用于传递状态的方法
function mapDispatchToProps(dispatch) {
  return {
    // 通知redux执行方法
    increment: data => dispatch(createIncrementAction(data)),
    decrement: data => dispatch(createDecrementAction(data)),
    incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
  }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
